<template>
	<view class="p-t-60 bigBox">
		<uv-transition :show="show" mode="slide-left" duration="500">
			<view class="postLeft"></view>
		</uv-transition>
		<uv-transition :show="show" mode="slide-right" duration="500">
			<view class="postRight"></view>
		</uv-transition>
		<view class="" style="z-index: 999;position: absolute;width: 100%;height: 100%;">
			
		<view class="font-44 font-weight textC">配对成功</view>
		<view class="font-weight grey textC m-t-30">你和 <text style="color: #333;"> {{userdetails.nickname||'微信用户'}} </text> 相互关注了对方</view>
		<view class="font-weight grey textC m-t-20">{{userdetails.city||'未知'}}｜{{userdetails.age||'0'}}岁｜{{userdetails.height||0}}｜{{userdetails.constellation||'星座保密'}}</view>
		<view class="userimgs">
			<uv-transition :show="show" mode="slide-left" duration="500">
				<image :src="userdetails.cover_image" style="margin-right: -31rpx;" mode=""></image>
			</uv-transition>
			
			<uv-transition :show="show" mode="slide-right" duration="500">
				<image :src="userInfo.avatar" style="margin-left: -31rpx;" mode=""></image>
			</uv-transition>
		</view>
		<input class="inputBox" type="text" placeholder="打个招呼" @click="handleSwitchConversation" placeholder-class="grey font-28">
		<view class="textC" style="color: #666666;" @click="goOn">继续探索</view>
		</view>
		
	</view>
</template>

<script>
	import TencentCloudChat from '@tencentcloud/chat';
	import "@/TUIKit/components/TUIConversation/subPackage-init.ts";
	import TUIChatEngine, {
		TUIConversationService,
		TUIStore,
		StoreName,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				show: true,
				userInfo:{},
				userdetails:{}
			};
		},
		onLoad(res) {
			this.getUserInfo()
			console.log(res);
			if(res.id) {
				this.getUserdetails(res.id)
			}
		},
		methods:{
			// 去聊天
			handleSwitchConversation(item) {
				let id = 'C2C' + this.userdetails.mobile
				uni.$emit("handleSwitchConversation", id);
				TUIConversationService.switchConversation(id);
				this.$util.redirectTo('/TUIKit/components/TUIChat/index', {
					handleSwitchConversation: id
				})
			},
			getUserdetails(id) {
				// 获取别人的详情
				this.$api.sendRequest({
					url: '/api/Friends/userdetails',
					data: {
						user_id: id
					},
					success: res => {
						this.userdetails = res.data
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
					}
				})
			},
			goOn() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.bigBox {
		position: relative;
	}
	.postLeft {
		width: 1000rpx;
		height: 1000rpx;
		border-radius:0 50% 50% 0;
		background-color: #f9efea;
		position: absolute;
		right: 40%;
		top: 0;
	}
	.postRight {
		width: 1000rpx;
		height: 1000rpx;
		border-radius:50% 0 0 50%;
		background-color: #f9efea;
		position: absolute;
		top: 0;
		left: 40%;
	}
	.inputBox {
		width: 604rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 40rpx auto;
		padding: 0 25rpx;
	}
	.userimgs {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		position: relative;
		
		image {
			width: 280rpx;
			height: 280rpx;
			border-radius: 50%;
			
		}
	}
</style>
